<template>
  <div class="course-detail">
    <h1>课程背景</h1>
    <p style="background-color: #f5f8f4; padding: 10px">
      {{ course.background }}
    </p>
    <h1>课程概述</h1>
    <p>{{ course.overview }}</p>
    <h1>授课目标</h1>
    <p>{{ course.teaching_target }}</p>
    <h1>课程大纲</h1>
    <!-- <course-outline :treeData="course.course_outline"></course-outline> -->
    <static-chapter :data="course.course_outline"></static-chapter>
    <h1>参考资料</h1>
    <ul>
      <li v-for="item in course.reference_material" :key="item.name">
        <a :href="item.url"> 《{{ item.name }}》 </a>
      </li>
    </ul>
    <h1>课程评分</h1>
    <div id="scores"></div>

    <div class="bottom-tool-bar" v-if="isShouldShow">
      <el-button v-show="course.isParticipated" disabled type="info" round
        >已参加</el-button
      >
      <el-button
        v-show="!course.isParticipated"
        @click="joinCourse"
        type="success"
        round
        >立即参加</el-button
      >
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  LegendComponent,
  TooltipComponent,
} from "echarts/components";
import { RadarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import CourseOutline from "@/components/CourseOutline";
import StaticChapter from "@/components/StaticChapter.vue";
// import { Tooltip } from 'element-ui';
echarts.use([
  TitleComponent,
  LegendComponent,
  TooltipComponent,
  RadarChart,
  CanvasRenderer,
]);

// import user from "@/store/user";
export default {
  components: { CourseOutline, StaticChapter },
  props: ["course_id"],
  data() {
    return {
      course: {},
      rates: [
        {
          label: "课程安排合理性评分",
          bindKey: "rationality",
          value: 8.6,
        },
        {
          label: "课程安排均衡性评分",
          bindKey: "equilibrium",
          value: 9,
        },

        {
          label: "课程安排整体性评分",
          bindKey: "entirety",
          value: 9,
        },
      ],
      isShouldShow: false,
      value: 2,
    };
  },
  created() {
    // 1. 要不要显示参加
    const { role, student_id } = JSON.parse(localStorage.getItem("userInfo"));
    // 2. 获取课程数据
    const { course_id } = this;
    if (role == "student") {
      this.isShouldShow = true;
      this.$http
        .get(
          `${this.$reqPrefix}/getCourseDetail?course_id=${course_id}&student_id=${student_id}`
        )
        .then((res) => {
          // console.log(res);
          this.course = res.data.data;
        });
    } else {
      this.$http
        .get(`${this.$reqPrefix}/getCourseDetail?course_id=${course_id}`)
        .then((res) => {
          // console.log(res);
          this.course = res.data.data;
        });
    }
  },
  mounted() {
    // 3.构筑scores的图表
    this.buildRadarChart("scores");
    // console.log("---mounted---");
  },
  methods: {
    joinCourse() {
      const { student_id } = JSON.parse(localStorage.getItem("userInfo"));
      const { course_id } = this;
      this.axios
        .get(`${this.$reqPrefix}/chooseCourse`, {
          params: {
            course_id,
            student_id,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            const { code } = res.data;
            this.$codeJudge(code, "选课成功", "选课失败");
            // 设置为不允许选课
            this.course.isParticipated = true;
          }
        });
    },
    buildRadarChart(id) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      const max = 100;

      option = {
        tooltip: {
          trigger: "item",
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "合理性", max },
            { name: "均衡性", max },
            { name: "整体性", max },
            { name: "环境", max },
            { name: "设备", max },
            { name: "使用率", max },
            { name: "出错率", max },
          ],
        },
        series: [
          {
            name: this.course.courseName,
            type: "radar",
            data: [
              {
                value: [37, 37, 27, 73, 51, 40, 32],
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.course-detail {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
  position: relative;
  min-height: 100%;
  h1 {
    font-weight: bold;
    line-height: 0;
    text-align: left;
  }
  p {
    font-size: 14px;
    text-indent: 2em;
    line-height: 20px;
    text-align: justify;
  }
  ul > li {
    line-height: normal;
    a {
      text-decoration: none;
      /* color: black; */
    }
  }
  .el-button {
    margin-top: 50px;
    align-self: center;
  }
  #scores {
    margin-top: 10px;
    width: 100%;
    height: 410px;
    // height: 500px;
    // & > div {
    //   transform: scale(0.8);
    // }
  }
  .bottom-tool-bar {
    width: calc(100% - 40px);
    position: absolute;
    bottom: 20px;
    text-align: center;
  }
}
</style>